<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="dataRule"
      label-width="140px"
      @keyup.enter.native="dataFormSubmit()"
    >
      <el-form-item label="权限名称" prop="rolePkId">
        <!-- 如果dataForm.role为空，显示下拉框 -->
        <el-select
            v-if="role === '' || role === null || role === undefined"
            v-model="dataForm.rolePkId"
            placeholder="请选择账户权限"
            style="width:100%"
        >
          <el-option
              v-for="option in roleOptions"
              :key="option.rolePkId"
              :label="option.roleName"
              :value="option.rolePkId"
          ></el-option>
        </el-select>
        <!-- 否则，显示 el-input 组件，且设置为只读 -->
        <el-input
          v-else
          v-model="dataForm.roleName"
          readonly
        ></el-input>
      </el-form-item>

      <el-form-item label="关联课题" prop="subjectPkId">
        <el-select
          v-model="dataForm.subjectPkId"
          placeholder="请选择此权限关联的课题"
          filterable
          style="width:100%"
        >
          <el-option
            v-for="option in researchOptions"
            :key="option.subjectPkId"
            :label=processResearch(option)
            :value="option.subjectPkId"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="关联中心" prop="sitePkId">
        <el-select
          v-model="dataForm.sitePkId"
          placeholder="请选择此权限关联的中心"
          filterable
          style="width:100%"
        >
          <el-option
            v-for="option in siteOptions"
            :key="option.sitePkId"
            :label=processSite(option)
            :value="option.sitePkId"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import research from '@/api/research'
import site from '@/api/site'
import user from '@/api/user'
import myUtils from '../../api/myUtils'
import { Container } from 'element-ui'
export default {
  data() {
    return {
      visible: true,
      dataRule: {
        rolePkId: [{ required: true, message: '权限不能为空', trigger: 'blur' }],
        subjectPkId: [{ required: true, message: '关联课题不能为空', trigger: 'blur' }],
        sitePkId: [{ required: true, message: '关联中心不能为空', trigger: 'blur' }]
      },
      dataForm: {
        rolePkId: null,
        subjectPkId: null,
        sitePkId: null,
        id: 0
      },
      inputVisible: false,
      inputValue: '',
      // roleOptions: [{
      //   rolePkId: '5c0276bedf27472bb5678f89cf160d11',
      //   roleName: '数据采集员'
      // }, {
      //   rolePkId: '25b81ce079e648b2a295d6d764167566',
      //   roleName: '分中心管理员'
      // }, {
      //   rolePkId: 'c6ddd825e7e6499187e467259a9de449',
      //   roleName: '课题管理员'
      // }, {
      //   rolePkId: '716a43e5f81f4f2185dda3542e4765de',
      //   roleName: '平台管理员'
      // }],
      roleOptions: [{
        rolePkId: '5c0276bedf27472bb5678f89cf160d11',
        roleName: '数据采集员'
      }, {
        rolePkId: '25b81ce079e648b2a295d6d764167566',
        roleName: '分中心管理员'
      }, {
        rolePkId: 'c6ddd825e7e6499187e467259a9de449',
        roleName: '课题管理员'
      }],
      researchOptions: [],
      siteOptions: [],
      role: null,
      roleDataList: []
    }
  },
  created() {
    this.getOptions()
  },
  methods: {
    getOptions() {
      // user.getUserVoByUserNum(this.$route.query.userNum).then(response => {
      //   console.log(response)
      //   if(response.data.roleInfoList != null){
      //     this.role = response.data.roleInfoList[0].rolePkId
      //     if(this.roleOptions.find(item => item.rolePkId === this.role)){
      //       this.dataForm.rolePkId = this.role
      //       this.dataForm.roleName = this.roleOptions.find(item => item.rolePkId === this.role).roleName
      //     }else{
      //       this.role = null
      //     }
      //   }
      // });
      research.researchAllAllSearch().then(response => {
        console.log(response.data.records)
        // this.researchOptions = response.data.records.map(obj => {
        //   return `${obj.subjectCode} ${obj.researchName}`
        // })
        this.researchOptions = response.data.records
      });
      site.siteAllAllSearch().then(response=>{
        console.log('--------')
        console.log(response.data.records)
        this.siteOptions = response.data.records
      });
    },
    processResearch(item){
      return item.subjectCode+" "+item.researchName;
    },
    processSite(item){
      return item.siteCode+" "+item.siteName;
    },
    dataFormSubmit() {
      console.log(this.dataForm)
      console.log("提交")
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.dataForm.roleName = this.roleOptions.filter(obj => obj["rolePkId"] === this.dataForm.rolePkId)[0].roleName
          // console.log("----------------")
          // console.log(this.researchOptions)
          // console.log(this.dataForm.roleName)
          // console.log(this.dataForm.rolePkId)
          this.dataForm.userPkId = this.$route.query.userNum
          this.dataForm.subjectCode = this.researchOptions.filter(obj => obj["subjectPkId"] === this.dataForm.subjectPkId)[0].subjectCode
          this.dataForm.siteCode = this.siteOptions.filter(obj => obj["sitePkId"] === this.dataForm.sitePkId)[0].siteCode
          this.dataForm.type = 1
          console.log(this.dataForm)
          user.addRole(this.dataForm).then(({ code }) => {
            if (code === '000000') {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 700,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error('添加失败')
            }
          })
        }
      })
    },
    init(userNum,roleDataList) {
      console.log(userNum)
      console.log(roleDataList)
      this.dataForm = {}
      this.visible = true
      this.getOptions()
      this.dataForm.userNum = userNum
      this.roleDataList = roleDataList
    },
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
